<script lang="ts" setup>
const tabList = [
  { id: 1, name: 'agency', path: '/pages/agency/index' },
  { id: 2, name: 'course', path: '/pages/course/index' },
  { id: 3, name: 'wallet', path: '/pages/wallet/index' },
]

const test = ref('')
uni.onThemeChange((res) => {
  test.value = res.theme
})
function enterPage(path: string) {
  uni.switchTab({
    url: path,
  })
}
</script>

<template>
  <view class="fixed-lb w-full">
    <view class="w-full flex gap-1">
      <view
        v-for="item in tabList"
        :key="item.id"
        class="h-10 w-[33%] flex items-center justify-center"
        :class="test !== 'dark' ? 'bg-light text-dark' : 'bg-dark text-light'"
        @click="enterPage(item.path)"
      >
        {{ item.name }}
      </view>
    </view>
  </view>
</template>
